/*
Loading indicator
=============================================
Displays a spinning circle to indicate a loading status.

Can be imported by using the `i` tag with the `icon--loading-indicator` class.

`<i class="icon--loading-indicator"></i>`

The functionality is provided by the `jquery.loading-indicator.js` file.
*/

.js--is-loading {
    position: relative;
}

.js--loading-indicator {
    position: absolute;
    display: none;
    z-index: @zindex-loading-indicator;
    top: 50%;
    left: 50%;

    body > & {
        position: fixed;
    }

    &.indicator--relative {
        .unitize-width(30);
        .unitize-height(30);
        .unitize(padding-top, 50);
        .unitize(padding-bottom, 50);
        background: none;
        position: relative;
        display: block;
        left: 50%;
        top: auto;
        border: 0 none;
    }

    &.indicator--absolute {
        .indicator--relative();
        position: absolute;
        padding: 0;
        top: 50%;

        &.js--loading-indicator {
            .unitize-margin(-15, 0, 0, -15);
        };
    }
}

.has--cssanimations {
    .js--loading-indicator {
        .unitize-margin(-13, 0, 0, -13);

        div[class^="icon--"] {
            .unitize-width(26);
            .unitize-height(26);

            display: block;
        }

        .icon--default:before,
        .icon--default::before {
            .unitize-width(22);
            .unitize-height(22);
            .border-radius(100%);
            .animation(keyframe--spin 1s linear infinite);
            display: block;
            content: "";
            border: 2px solid @border-color;
            border-top: 2px solid darken(@border-color, 25%);
        }
    }
}

.has--no-cssanimations {
    .js--loading-indicator {
        .unitize-margin(-13, 0, 0, -13);

        div[class^="icon--"] {
            .unitize-width(16);
            .unitize-height(16);

            display: block;
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .icon--default {
            .unitize-height(16, 16);
            .unitize-width(16, 16);

            background-image: url(../../img/icons/loading-indicator.gif);
        }
    }
}